/**
* @description: 现场验收-核查更新
* @author: zhaohui
* @data:2023年6月25日
* @remark:
**/
<template>
	<div class="cable-detail-wrap">
		<nav-bar class="header" back title="纤芯核查" @goBack="goBack" />

		<!-- 切换tab -->
		<div class="cable-info-tab">
			<div class="info-tab-item" :class="currentTab === 'cable' ? ' info-tab-current': ''"
				@click="tabChange('cable')">光缆信息</div>
			<div class="info-tab-item" :class="currentTab === 'fibre' ? ' info-tab-current': ''"
				@click="tabChange('fibre')">纤芯信息</div>
		</div>

		<!-- 光缆信息 -->
		<div class="cable-info" v-if="currentTab === 'cable'">
			<plateTitle title="光缆信息" class="plate-title-1" />
			<view class="cable-info-container">
				<van-cell-group>
					<van-cell v-for="(item,index) in testData" :key="index" :title="item.title" :value="item.text" />
				</van-cell-group>
			</view>


			<plateTitle title="巡视信息" :isRequired="false" class="plate-title-1" />

			<!-- 巡视照片 -->
			<view class="patrol-info-container">
				<view>巡视照片</view>
				<van-divider dashed />
				<div v-if="files.filter(item => item.img).length === 0" style="text-align: center;">暂无数据</div>
				<div v-else class="image-wrap">
					<div class="image-list">
						<div class="upload-button" v-for="(imgItem, index) in files"
							:style="{'background-image': `url(${imgItem.bgImg})`}" v-if="imgItem.img">
							<img v-if="imgItem.img" :src="imgItem.img" alt=""
								@click.stop="imageHandle(imgItem, index, 'PREVIEW')">
						</div>
					</div>
				</div>
			</view>

			<!-- 备注 -->
			<view class="remark-info-container">
				<view>备注</view>
				<van-divider dashed />
				<div class="remark-wrap">
					<!-- :value="taskDetail.originData.fiber_exam_msg.REMARK" -->
					<textarea class="remark-text" disabled>
          </textarea>
				</div>
			</view>


			<!-- 核查信息 -->
			<view class="result-info-container">
				<view class="patrol-info-container">
					<van-field readonly clickable input-align="right" right-icon="arrow" :value="isCoincide"
						label="台账信息与现场信息是否一致" placeholder="点击选择" @click="showPicker = true" />
					<van-radio-group v-show="isCoincide === '不一致'" v-model="operation" icon-size="15px"
						checked-color="#417ADC">
						<van-radio name="noExist">现场无此设备，将标记此设备状态为“不存在”</van-radio>
						<van-divider dashed />
						<van-radio name="modify">现场设备信息不一致，将标记此设备状态为“修改”</van-radio>
					</van-radio-group>
				</view>
			</view>
			<van-button block @click="reEdit">{{isCoincide === '不一致' ? '重新编辑': '保存'}}</van-button>

		</div>

		<!-- 纤芯信息 -->
		<div class="fibre-info" v-else>
			<div class="fibre-rate">
				<!-- 进度条 -->
				<div class="progress-bar">
					<div class="bar-title">已完成</div>
					<div class="bar-chart">
						<div class="bar-chart-off"
							:style="{width: (fiberDetail.fiber_exam_state.VER / fiberDetail.fiber_exam_state.TOTAL) * 100 + '%'}">
						</div>
					</div>
					<div class="bar-text">
						<span class="bar-off">{{fiberDetail.fiber_exam_state.VER}}/</span>
						<span class="bar-all">{{fiberDetail.fiber_exam_state.TOTAL}}</span>
					</div>
				</div>
			</div>

			<!-- 统计信息 -->
			<div class="fibre-rate-info" v-if="isFinished">
				<div class="info-item">
					<div class="value">{{fiberDetail.fiber_exam_state.FREE}}</div>
					<div class="label">空余纤芯</div>
				</div>
				<div class="info-item">
					<div class="value">{{fiberDetail.fiber_exam_state.FREE_RATE}}</div>
					<div class="label">纤芯空闲率</div>
				</div>
				<div class="info-item">
					<div class="value">{{fiberDetail.fiber_exam_state.USED}}</div>
					<div class="label">已使用纤芯</div>
				</div>
				<div class="info-item">
					<div class="value">{{fiberDetail.fiber_exam_state.USED_RATE}}</div>
					<div class="label">纤芯使用率</div>
				</div>
			</div>

			<div class="fibre-content-title">
				<plateTitle title="纤芯列表">
					<div class="condition-bar" v-if="!isFinished">
						<div class="condition-item" :class="{'condition-item-checked': currentFiberTypeTab==='全部'}"
							@click="currentFiberTypeTab='全部'">全部 {{fiberDetail.fiber_exam_count.TOTAL}}</div>
						<div class="condition-item" :class="{'condition-item-checked': currentFiberTypeTab==='未核查'}"
							@click="currentFiberTypeTab='未核查'">未核查 {{fiberDetail.fiber_exam_count.NOT_VER}}</div>
						<div class="condition-item" :class="{'condition-item-checked': currentFiberTypeTab==='已核查'}"
							@click="currentFiberTypeTab='已核查'">已核查 {{fiberDetail.fiber_exam_count.VER}}</div>
					</div>
				</plateTitle>
			</div>

			<div class="fibre-pair-list">
				<div class="fibre-pair-item"
					v-show="currentFiberTypeTab===item.TOUR_STATE_NAME || currentFiberTypeTab==='全部'"
					v-for="(item, index) in fiberDetail.fiber_exam_list" :key="index">
					<div class="fibre-pair-detail">
						<div class="replace-index">{{item.CORE_NAME}}</div>
						<div class="replace-text">
							{{item.IS_OCCUPY === '6' ? '纤芯保护': (item.IS_OCCUPY === '5' ? '未占用' : '已占用')}}</div>
						<div class="replace-state" @click="jump(item)"
							:class="item.TOUR_STATE===0 ? 'replace-state-off' : 'replace-state-on'">
							{{item.TOUR_STATE_NAME}}</div>
					</div>

					<hr class="replace-hr">
					<view class="top-replace-main" v-if="item.LENGTH">
						<text class="replace-big-ltitle">测试长度（KM）:</text>
						<text class="replace-small-ltitle">{{ item.LENGTH }}</text>
					</view>
					<view class="top-replace-main" v-if="item.LOSS">
						<text class="replace-big-ltitle">全程总损耗:</text>
						<text class="replace-small-ltitle">{{ item.LOSS }}</text>
					</view>
					<view class="top-replace-main" v-if="item.LIGHT_NAME">
						<text class="replace-big-ltitle">光路:</text>
						<text class="replace-small-ltitle">{{ item.LIGHT_NAME }}</text>
					</view>
					<view class="top-replace-main" v-if="item.LABEL">
						<text class="replace-big-ltitle">标签:</text>
						<text class="replace-small-ltitle">{{ item.LABEL }}</text>
					</view>
				</div>

			</div>
		</div>

		<van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
			<van-swipe>
				<div v-for="(image, index) in files" :key="index">
					<van-swipe-item v-if="image.img" style="text-align: center;">
						<div style="width: 100%; text-align: center;">{{ image.previewName }}</div>
						<img :src="image.img" />
					</van-swipe-item>
				</div>
			</van-swipe>
		</van-popup>

		<!--选择器-->
		<van-popup v-model="showPicker" position="bottom">
			<van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
		</van-popup>
	</div>
</template>

<script>
	import config from "../../../common/config";
	import navBar from "../../../components/common/nav-bar";
	import plateTitle from '../../../components/business/plateTitle.vue';
	import {
		Dialog
	} from "vant";
	import {
		mapGetters
	} from "vuex";
	import {
		merge
	} from "lodash";


	// 光缆条目对应
	let map_cable = {
		"NAME": "光缆名称", //光缆名称
		"A_SITE_NAME": "起点名称", //起点名称
		"Z_SITE_NAME": "终点名称", //终点名称
		"VOLTAGE_CLASS": "电压等级", //电压等级
		"OPTICALORDER": "光缆顺序", //光缆顺序
		"FIBER_TYPE": "光缆种类", //光缆种类
		"POWER_LINE": "所属线路", //所属线路
		"LENGTH": "长度(Km)", //长度(Km)
		"LINE_NUMBER": "纤芯总数", //纤芯总数
		"RUN_STATE": "运行状态" // 运行状态
	}

	// 巡视条目对应
	let map_tour = {
		"XSJG": "巡视结果", //设备状态（1 一致  2  不存在  3  新增   4  更新）
		"TOUR_OPER_NAME": "巡视人", //巡视人姓名
		"TOUR_TIM": "巡视时间", //巡视时间
	}

	let fileTemplate = [{
			name: "EQUIPMENT.jpg",
			previewName: "设备照片",
			type: "EQUIPMENT",
			bgImg: require("../../../static/img/bg_shebei.png"),
			raw: null, // raw文件
			img: '', // 用来显示的照片
		},
		{
			name: "NAMEPLATE.jpg",
			previewName: "铭牌照片",
			type: "NAMEPLATE",
			bgImg: require("../../../static/img/bg_mingpai.png"),
			raw: null, // raw文件
			img: '', // 用来显示的照片
		},
		{
			name: "OTHER.jpg",
			previewName: "其他照片",
			type: "OTHER",
			bgImg: require("../../../static/img/bg_qita.png"),
			raw: null, // raw文件
			img: '', // 用来显示的照片
		},
	];

	// 已完成-纤芯列表头部统计
	let map_rate = {
		"FREE": "空余纤芯",
		"FREE_RATE": "纤芯空闲率",
		"USED": "已使用纤芯",
		"USED_RATE": "纤芯使用率"
	}

	export default {
		name: "cableDetail", // 通信光缆详情
		data() {
			return {
				currentTab: "cable", // 当前显示内容 fibre-纤芯 cable-光缆
				currentFiberTypeTab: "全部", // 当前纤芯列表类型 全部/未核查/已核查
				taskDetail: {}, // 光缆详情
				files: {}, // 照片map
				fiberDetail: { // 纤芯详情
					fiber_exam_state: {}, // 头部进度条统计的两个数
					fiber_exam_list: [{
						CORE_NAME: "2",
						IS_OCCUPY: "5",
						TOUR_STATE_NAME: "2",
						LENGTH: "cs"
					}], // 纤芯列表
					fiber_exam_count: {} // 纤芯状态统计
				},
				baseUrl: "", // 基础url
				objId: '', // 巡视id
				taskId: '', // 主工单id
				isFinished: false, // 纤芯是否核查完毕
				isEditable: false, // 是否可重新编辑
				showPreview: false, // 图片预览
				testData: [{
					title: "光缆名称",
					text: "测试"
				}, {
					title: "起点名称",
					text: "测试"
				}, {
					title: "终点名称",
					text: "测试"
				}, {
					title: "电压等级",
					text: "测试"
				}, {
					title: "光缆顺序",
					text: "测试"
				}, {
					title: "光缆种类",
					text: "测试"
				}, {
					title: "所属线路",
					text: "测试"
				}, {
					title: "光缆长度(Km)",
					text: "测试"
				}, {
					title: "纤芯总数",
					text: "测试"
				}],
				operation: "modify", // 默认值
				isCoincide: "不一致",
				showPicker: false,
				columns: ["一致", "不一致"],
			}
		},
		components: {
			navBar,
			plateTitle,
		},
		computed: {
			...mapGetters(["userData"]),
		},
		onLoad(options) {
			this.objId = options.tourId;
			this.files = JSON.parse(JSON.stringify(fileTemplate));
			// this.getCableInfo();
			// this.getFiberInfo();
			config.getOptions.then(res => {
				this.baseUrl = res.firstUrl;
			})
		},
		onShow() {
			// this.getCableInfo();
		},
		methods: {
			tabChange(currentTab) {
				this.currentTab = currentTab;
				this.getCableInfo();
				// (currentTab === "fibre") && (this.getFiberInfo());
				// (currentTab === "cable") && (this.getCableInfo());
			},
			// 循环滚动判断
			// isLoop(index) {
			//   this.$nextTick(() => {
			//     let containerWith = 645 / 1080 * window.innerWidth;
			//     if(this.$refs.loopText[index].offsetWidth > containerWith) {
			//       this.$refs.loopText[index].className = 'loop';
			//     }
			//   })
			// },
			goBack() {
				uni.navigateBack();
			},
			// 获取光缆详情
			getCableInfo() {
				this.$api.getFiberMsgLineExam({
					fiber_exam_id: this.objId
				}).then(res => {
					// 如果当前项为当前操作人巡视完成的，状态为未完成，设备状态为更新或新增，则显示编辑按钮支持编辑，并且状态为未完成，则显示编辑按钮支持编辑
					this.isEditable = (
						res.data.fiberMsg.TOUR_OPER_ID === this.$store.state.userData.userId &&
						res.data.fiberMsg.TASK_DET_STATE !== '99' &&
						(res.data.fiberMsg.SERVICE_STATE === 3 || res.data.fiberMsg.SERVICE_STATE === 4)
					)
					this.taskId = res.data.fiberMsg.TASK_ID;
					// 判断纤芯是否核查完毕
					res.data.fiberMsg.TOUR_STATE === 0 ? this.isFinished = false : this.isFinished = true;

					this.taskDetail = {
						originData: res.data,
						cableDetailArr: Object.keys(map_cable).map(item => {
							return {
								title: map_cable[item],
								text: res.data.fiberMsg[item]
							}
						}),
						tourDetailArr: Object.keys(map_tour).map(item => {
							let text = res.data.fiber_exam_msg[item];
							let color = "";
							(text === "一致") && (color = "blue");
							(text === "新增") && (color = "green");
							(text === "不存在") && (color = "red");
							(text === "更新") && (color = "yellow");
							return {
								title: map_tour[item],
								text: text,
								color: color
							}
						}),
					};

					this.files = this.files.map((item) => {
						return {
							...item,
							img: res.data.fiberMsg.photoMap[item.type] ? this.baseUrl + res.data.fiberMsg
								.photoMap[item.type] : '',
						}
					})

					this.getFiberInfo();
				})
			},
			// 获取纤芯详情
			getFiberInfo() {
				// 已完成
				if (this.isFinished) {
					this.$api.getLineExamAccomplish({
						fiber_exam_id: this.objId
					}).then(res => {
						this.fiberDetail = res.data;
					});
				}

				// 未完成
				else {
					this.$api.getLineMsgLineExam({
						fiber_exam_id: this.objId
					}).then(res => {
						this.fiberDetail = res.data;
					});
				}
			},
			// 点击纤芯核查状态跳转
			jump(fiberInfo) {
				// 点击未核查
				if (fiberInfo.TOUR_STATE === 0) {
					let params = {
						"batchId": this.userData.batchId, //是	string	批次id
						"lindId": fiberInfo.CORE_OBJ_ID, //是	string	纤芯id
						"line_exam_id": fiberInfo.OBJ_ID, //是	string	纤芯巡视id
						"is_occupy": fiberInfo.IS_OCCUPY, //是	string	是否占用
						"tour_state": fiberInfo.TOUR_STATE, //是	string	巡视状态
						"fiber_exam_id": fiberInfo.PAR_OPT, //是	string	光缆巡视id
					};
					// 查询当前纤芯信息（查询本端占用状态、对端核查状态、对端占用状态）
					this.$api.todoTaskApi.lineMsg(params).then(res => {
						// todo: 同步对端判断，2023.3.18要求去掉，暂时注释
						// // 如果对端已核查
						// if (res.data.lineMsg.IS_EXIST === 1) {
						//   // 如果对端未占用/对端无占用信息，询问是否跳转至纤芯完善页
						//   if (res.data.lineMsg.FRONT_OCCUPY === "5" || res.data.lineMsg.FRONT_OCCUPY === undefined) {
						//     Dialog.confirm({
						//       title: "对端纤芯已核查且未占用，是否去完善？",
						//     }).then(() => { // 确认 跳转至纤芯完善
						//       uni.navigateTo({
						//         url: `/pages/workBench/todoTask/cableTour/cableDetail/completeFiber?taskId=${this.taskId}&opticalInfo=${JSON.stringify(res.data.lineMsg)}&source=cableDetail`
						//       });
						//     });
						//   }
						//   // 如果对端已占用，跳转至纤芯核查
						//   else {
						//     uni.navigateTo({
						//       url: `/pages/workBench/todoTask/cableTour/cableDetail/fiberInspect?obj=${JSON.stringify(fiberInfo)}&fiber_exam_id=${this.objId}`
						//     })
						//   }
						// }
						//
						// // 如果对端未核查，则显示当前纤芯信息
						// else {
						//   // 如果本端已占用，跳转至纤芯核查
						//   if(res.data.lineMsg.IS_OCCUPY !== "5" && res.data.lineMsg.IS_OCCUPY !== undefined){
						//     uni.navigateTo({
						//       url: `/pages/workBench/todoTask/cableTour/cableDetail/fiberInspect?obj=${JSON.stringify(fiberInfo)}&fiber_exam_id=${this.objId}`
						//     })
						//   }
						//   // 如果本端未占用，跳转至纤芯完善
						//   else {
						//     uni.navigateTo({
						//       url: `/pages/workBench/todoTask/cableTour/cableDetail/completeFiber?taskId=${this.taskId}&opticalInfo=${JSON.stringify(fiberInfo)}&source=cableDetail`
						//     });
						//   }
						// }
						// 如果本端已占用，跳转至纤芯核查
						if (res.data.lineMsg.IS_OCCUPY !== "5" && res.data.lineMsg.IS_OCCUPY !== undefined) {
							uni.navigateTo({
								url: `/pages/workBench/todoTask/cableTour/cableDetail/fiberInspect?obj=${JSON.stringify(fiberInfo)}&fiber_exam_id=${this.objId}`
							})
						}
						// 如果本端未占用，跳转至纤芯完善
						else {
							uni.navigateTo({
								url: `/pages/workBench/todoTask/cableTour/cableDetail/completeFiber?taskId=${this.taskId}&opticalInfo=${JSON.stringify(fiberInfo)}&source=cableDetail`
							});
						}
					});
				}

				// 点击已核查-跳转至纤芯详情
				else {
					uni.navigateTo({
						url: `/pages/workBench/todoTask/cableTour/cableDetail/fiberDetail?fiberInfo=${JSON.stringify(fiberInfo)}`
					})
				}

				// // 未核查
				// if(fiberInfo.TOUR_STATE === 0) {
				//   // 纤芯未占用 或 纤芯无占用状态，跳转至纤芯完善
				//   if(fiberInfo.IS_OCCUPY === "5" || fiberInfo.IS_OCCUPY === undefined) {
				//     // uni.navigateTo({
				//     //   url: `/pages/workBench/todoTask/cableTour/cableDetail/fiberInspect?obj=${JSON.stringify(fiberInfo)}&fiber_exam_id=${this.objId}`
				//     // })
				//     uni.navigateTo({
				//       url: `/pages/workBench/todoTask/cableTour/cableDetail/completeFiber?taskId=${this.taskDetail.originData.fiberMsg.TASK_ID}&opticalInfo=${JSON.stringify(fiberInfo)}&source=cableDetail`
				//     });
				//   }
				//   // 纤芯被占用，跳转至纤芯核查
				//   else {
				//     uni.navigateTo({
				//       url: `/pages/workBench/todoTask/cableTour/cableDetail/fiberInspect?obj=${JSON.stringify(fiberInfo)}&fiber_exam_id=${this.objId}`
				//     })
				//   }
				// }
				//
				// // 已核查-跳转至纤芯详情
				// else {
				//   uni.navigateTo({
				//     url: `/pages/workBench/todoTask/cableTour/cableDetail/fiberDetail?fiberInfo=${JSON.stringify(fiberInfo)}`
				//   })
				// }
			},
			/**
			 * @param {Object} value
			 * 台账信息与现场信息是否一致
			 */
			onConfirm(value) {
				this.isCoincide = value;
				this.showPicker = false;
			},
			imageHandle(imgItem, imgIndex, handleType) {
				if (handleType === 'CHOOSE') {
					this.choosePhoto(imgItem, imgIndex);
				} else if (handleType === 'PREVIEW') {
					this.showPreview = true;
				} else if (handleType === 'DELETE') {
					Dialog.confirm({
							message: `是否确认删除${imgItem.previewName}`,
							confirmButtonColor: '#417adc'
						})
						.then(() => {
							this.$set(this.files, imgIndex, {
								...this.files[imgIndex],
								raw: null,
								img: ''
							})
							this.delList.includes(imgItem.type) ? null : this.delList.push(imgItem.type);
							console.log(this.delList, "delete")

						})
						.catch(() => {
							// on cancel
						})
				}
			},
			choosePhoto(imgItem, imgIndex) {
				let _this = this;
				wx.chooseImage({
					count: 3,
					sourceType: ["camera"],
					success: (chooseImageRes) => {
						wx.getLocalImgData({
							localId: chooseImageRes.localIds[0].toString(),
							success: function(res) {
								const localData = res.localData;
								let imageBase64 = '';
								if (localData.indexOf('data:image') == 0) {
									//苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
									imageBase64 = localData;
								} else {
									//此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
									//此时一个正常的base64图片路径就完美生成赋值到img的src中了
									imageBase64 = 'data:image/jpeg;base64,' + localData.replace(
										/\n/g, '');
								}

								_this.$set(_this.files, imgIndex, merge(_this.files[imgIndex], {
									raw: _this.h5_url_to_blob(imageBase64),
									img: imageBase64
								}));


								if (_this.delList.includes(imgItem.type)) {
									_this.delList = _this.delList.filter(item => {
										if (item === imgItem.type) {
											return false;
										}

										return true;
									});
								}
							}
						});
					},
					fail: (error) => {
						console.log(error);
					}
				});
			},
			h5_url_to_blob(url) {
				let arr = url.split(',');
				let mime = arr[0].match(/:(.*?);/)[1];
				let bstr = atob(arr[1]);
				let n = bstr.length;
				let u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new Blob([u8arr], {
					type: mime
				});
			},

			// 光缆信息重新编辑
			reEdit() {
				let params = this.taskDetail.originData;
				uni.navigateTo({
					url: `/pages/workBench/todoTask/cableTour/completeCableInfo?taskId=${this.taskId}&tourId=${params.fiberMsg.OBJ_ID}&fiberId=${params.fiberMsg.OPT_ID}&reTourCheck=0`
				});

				// 设备状态（1 一致  2  不存在  3  新增   4  更新）
				// 判断上次巡视结果，如果为一致/不存在，跳转核查页
				// let params = this.taskDetail.originData;
				// if(params.fiberMsg.SERVICE_STATE === 1 || params.fiberMsg.SERVICE_STATE === 2) {
				//   uni.navigateTo({
				//     url: `/pages/workBench/todoTask/cableTour/cableInspect?fiberId=${params.fiberMsg.OPT_ID}&tourId=${params.fiberMsg.OBJ_ID}&reTourCheck=0`
				//   });
				// }
				// // 如果为更新/新增，跳转完善页
				// else if(params.fiberMsg.SERVICE_STATE === 4 || params.fiberMsg.SERVICE_STATE === 3) {
				//   uni.navigateTo({
				//     url: `/pages/workBench/todoTask/cableTour/completeCableInfo?taskId=${this.taskId}&tourId=${params.fiberMsg.OBJ_ID}&fiberId=${params.fiberMsg.OPT_ID}&reTourCheck=0`
				//   });
				// }
			},
			// 未核查跳转
			noInspect() {

			},
			// 已核查跳转
			Inspect() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.cable-detail-wrap {
		.header {
			position: sticky;
			top: 0;
			z-index: 9;
		}

		width: 100vw;
		min-height: 100vh;
		background-color: rgba(242, 246, 250, 1);

		.van-preview-wrap {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;

			.van-swipe {
				width: 100%;
				height: 60%;
			}

			img {
				height: 90%;
			}
		}

		.cable-state {
			width: 100vw;
			height: px2vh(140);
			background-color: #ffffff;
			box-sizing: border-box;
			padding: 0 px2vw(30) 0 px2vw(49);
			display: flex;
			justify-content: space-between;
			align-items: center;

			.cable-state-title {
				font-size: px2vw(42);
			}

			.cable-state-text {
				width: px2vw(220);
				height: px2vh(80);
				border-radius: px2vw(40);
				font-size: px2vw(42);
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;

				&.cable-state-on {
					color: rgba(255, 67, 85, 1);
					background-color: rgba(255, 67, 85, 0.1);
				}

				&.cable-state-off {
					color: rgba(65, 220, 131, 1);
					background-color: rgba(65, 220, 131, 0.1);
				}
			}
		}

		.cable-info-tab {
			width: calc(100% - #{px2vw(60)});
			height: px2vh(120);
			border-radius: px2vw(20);
			box-sizing: border-box;
			margin: px2vh(40) px2vw(30) px2vh(30);
			padding: 0 px2vw(10);
			background-color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;

			.info-tab-item {
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: rgba(51, 51, 51, 1);
				font-size: px2vw(38);

				&.info-tab-current {
					height: px2vh(100);
					//margin-right: px2vw(10);
					border-radius: px2vw(20);
					background-color: rgba(65, 122, 220, 1);
					color: rgba(255, 255, 255, 1);
					font-weight: Bold;
				}
			}
		}

		.cable-info {
			width: calc(100% - #{px2vw(60)});
			height: calc(100vh - #{px2vh(383)});
			margin: auto;
			padding-bottom: px2vh(30);
			overflow: auto;

			.plate-title-1 {
				margin-top: px2vh(30);
				margin-bottom: px2vh(27);
			}

			.cable-info-container,
			.result-info-container {
				border-radius: px2vw(20);
				overflow: hidden;
				background-color: #FFFFFF;
			}

			.result-info-container {
				.patrol-info-container {
					font-size: px2vw(42);
					color: #666666;
					border-radius: $border-radius-base;
					overflow: hidden;
					background-color: #FFFFFF;

					.van-radio-group {
						font-size: px2vw(42);
						padding: px2vh(60) 0;
					}

					/deep/ .van-field__label {
						font-size: px2vw(42);
						width: auto;
					}
				}

				.yellow {
					/deep/.van-cell__value {
						color: #FFAD0E;
					}
				}

				.blue {
					/deep/.van-cell__value {
						color: #417ADC;
					}
				}

				.green {
					/deep/.van-cell__value {
						color: #41DC83;
					}
				}

				.red {
					/deep/ .van-cell__value {
						color: #FF4355;
					}
				}
			}

			.remark-info-container {
				padding: px2vh(70) px2vw(50);
				font-size: px2vw(42);
				color: #666666;
				border-radius: px2vw(20);
				overflow: hidden;
				background-color: #FFFFFF;
				margin-top: px2vh(40);
				margin-bottom: px2vh(40);

				.remark-wrap {
					background-color: #FAFAFA;
					padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
					border-radius: px2vw(20);

					.remark-text {
						height: px2vh(150);
					}
				}
			}

			.patrol-info-container {
				padding: px2vh(70);
				font-size: px2vw(42);
				color: #666666;
				border-radius: px2vw(20);
				overflow: hidden;
				background-color: #FFFFFF;

				/deep/ .van-radio {
					margin-right: px2vw(139.5)
				}

				/deep/ .van-cell {
					padding-left: 0;
				}

				.image-wrap {
					width: 100%;
					display: flex;

					img {
						width: px2vw(215);
						height: px2vw(215);
						margin-right: px2vw(40);
						border-radius: px2vw(6);
					}

					.image-list {
						width: 100%;
						display: flex;

						.upload-button {
							width: px2vw(215);
							height: px2vw(215);
							background-size: cover;
							margin-right: px2vw(40);
							position: relative;

							.delete-icon {
								position: absolute;
								top: px2vw(-20);
								right: px2vw(-20);
								width: px2vw(40);
								height: px2vw(40);
								background-color: rgba(0, 0, 0, 0.7);
								border-radius: 50%;
								color: #fff;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
					}
				}
			}
		}

		.fibre-info {
			.fibre-rate {
				width: calc(100% - #{px2vw(60)});
				//height: px2vh(140);
				border-radius: px2vw(20);
				box-sizing: border-box;
				margin: px2vh(40) px2vw(30) px2vh(30);
				background-color: #ffffff;
				overflow: hidden;

				.progress-bar {
					height: px2vh(140);
					background-color: #ffffff;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.bar-title {
						font-size: px2vw(42);
						color: rgba(65, 122, 220, 1);
						margin-left: px2vw(40);
					}

					.bar-chart {
						width: px2vw(660);
						height: px2vh(34);
						margin: 0 px2vw(27) 0 px2vw(30);
						background-color: #ECF1FB;

						.bar-chart-off {
							//width: 75%;
							height: 100%;
							background: repeating-linear-gradient(135deg, #417ADC, #417ADC #{px2vw(16)}, #B3CAF1 #{px2vw(16)}, #B3CAF1 #{px2vw(32)});
						}
					}

					.bar-text {
						font-size: px2vw(42);
						margin-right: px2vw(40);
						font-weight: bold;
						color: #7C7C7C;

						.bar-off {
							color: #417ADC;
						}
					}
				}
			}

			.fibre-rate-info {
				//margin: 0 auto px2vh(40);
				margin: 0 auto px2vh(60);
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: px2vh(54) px2vw(70);
				width: calc(100% - #{px2vw(60)});
				font-size: px2vw(40);
				border-radius: px2vw(20);
				overflow: hidden;
				background-color: #FFFFFF;

				.info-item {
					.value {
						margin-bottom: px2vh(26);
						font-size: px2vh(54);
						font-weight: 700;
						color: #417adc;
						text-align: center;
					}

					.label {
						font-size: px2vh(36);
						font-weight: bold;
						color: #333333;
						text-align: center;
					}
				}
			}
		}

		.fibre-content-title {
			width: calc(100% - #{px2vw(80)});
			box-sizing: border-box;
			margin: px2vh(0) px2vw(40) px2vh(18);

			.condition-bar {
				display: flex;
				justify-content: center;

				.condition-item {
					height: px2vh(56);
					background-color: rgba(65, 122, 220, 0.1);
					border: #{px2vw(2)} solid rgba(65, 122, 220, 1);
					color: rgba(65, 122, 220, 1);
					border-radius: px2vw(6);
					font-size: px2vw(30);
					padding: 0 px2vw(16) 0 px2vw(19);
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0 px2vw(5);

					&:last-child {
						margin-right: 0;
					}

					&.condition-item-checked {
						background-color: rgba(65, 122, 220, 1);
						color: rgba(255, 255, 255, 1);
					}
				}
			}
		}

		.fibre-pair-list {
			height: calc(100vh - #{px2vh(613)});
			overflow: auto;

			.fibre-pair-item {
				width: calc(100% - #{px2vw(60)});
				border-radius: px2vw(20);
				box-sizing: border-box;
				margin: px2vh(40) px2vw(30) px2vh(40);
				padding: 8px 0;
				background-color: #ffffff;

				.fibre-pair-detail {
					min-height: px2vh(140);
					display: flex;
					justify-content: space-between;
					align-items: center;

					.replace-index {
						margin: 0 px2vw(28) 0 px2vw(40);
						width: px2vw(64);
						height: px2vw(64);
						border-radius: 50%;
						background: radial-gradient(circle at center, #417ADC, #417ADC #{px2vw(23)}, #ffffff #{px2vw(23)}, #ffffff #{px2vw(26)}, #417ADC #{px2vw(26)}, #417ADC 100%);
						color: #ffffff;
						font-size: px2vw(36);
						font-weight: bold;
						display: flex;
						justify-content: center;
						align-items: center;
					}


					.replace-text {
						width: px2vw(645);
						font-size: px2vw(46);
						font-weight: bold;
						color: #666666;
					}

					.replace-state {
						font-size: px2vw(42);
						margin-right: px2vw(39);

						&.replace-state-on {
							color: #41DC83;
						}

						&.replace-state-off {
							color: #FF4355;
						}
					}
				}


				.replace-hr {
					width: px2vw(940);
					border: px2vh(1) solid #e5e5e5;
					margin-left: px2vw(40);
					margin-bottom: px2vh(42);
				}

				.top-replace-main {
					width: px2vw(900);
					font-size: px2vh(36);
					line-height: px2vh(62);
					margin-left: px2vw(60);

					.replace-big-ltitle,
					.replace-big-rtitle {
						color: #666;
					}

					.replace-small-ltitle,
					.replace-small-rtitle {
						margin-left: px2vw(25);
						color: #333;
					}

					.replace-big-rtitle {
						margin-left: px2vw(245);
					}
				}
			}
		}

		/deep/.van-button {
			margin-top: px2vh(30);
			height: px2vh(120);
			color: #fff;
			background-color: #417adc;
			border: 1px solid #417adc;
			border-radius: px2vh(60);
		}

		@keyframes wordsLoop {
			0% {
				transform: translateX(10%);
				-webkit-transform: translateX(10%);
			}

			100% {
				transform: translateX(-100%);
				-webkit-transform: translateX(-100%);
			}
		}
	}
</style>
